<!-- 配送员选择弹窗 -->
<template>
  <el-dialog
    v-model="dialogVisible"
    :title="`${' 任务单号：' + dialogProps.data.taskId + ' > ' + dialogProps.title}`"
    width="1000px"
    draggable
    align-center
  >
    <div class="main-box">
      <div class="table-box">
        <ProTable
          ref="proTable"
          title="配送员列表"
          highlight-current-row
          :columns="columns"
          :request-api="getUserList"
          :init-param="Object.assign(initParams)"
          height="400px"
        >
          <!-- 表格操作 -->
          <template #operation="scope">
            <el-button type="primary" link :icon="View" @click="selectCourier(scope.row)">选择分配</el-button>
          </template>
        </ProTable>
      </div>
    </div>
    <!-- <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" v-show="!dialogProps.isView" @click="handleSubmit">确定</el-button>
    </template> -->
  </el-dialog>
</template>

<script setup lang="ts" name="StatusDialog">
import { ref, onMounted } from "vue";
import { User } from "@/api/interface";
// import { ElMessageBox } from "element-plus";
import { useHandleData } from "@/hooks/useHandleData";
import { genderType, userRole } from "@/utils/serviceDict";
import { useUserStore } from "@/stores/modules/user";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { View } from "@element-plus/icons-vue";
import { getUserList } from "@/api/modules/user";
import { assignTaskOrder } from "@/api/modules/substation";
import { ElNotification } from "element-plus"; //通知组件

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "userId", label: "id", width: 80, sortable: true, search: { el: "input" } },
  { prop: "name", label: "姓名", width: 80, search: { el: "input" } },
  { prop: "userGender", label: "性别", width: 80, sortable: true, enum: genderType },
  { prop: "userIdentity", label: "身份证号", width: 180, search: { el: "input" } },
  { prop: "userRole", label: "身份", width: 120, sortable: true, tag: true, enum: userRole },
  { prop: "operation", label: "操作", fixed: "right" }
];

// 获取用户角色字典
onMounted(() => {});

const userStore = useUserStore();
const initParams = ref({ userRole: 8, departmentId: userStore.userInfo.departmentId, userStatus: 1 });

interface DialogProps {
  title: string;
  isView: boolean;
  data: { taskId: string | undefined };
  getTableList?: () => void;
}

const dialogVisible = ref(false);

const dialogProps = ref<DialogProps>({
  isView: false,
  title: "",
  data: { taskId: "" }
});

// 接收父组件传过来的参数
const acceptParams = (params: DialogProps) => {
  dialogProps.value = params;
  dialogVisible.value = true;
};

// const handleSubmit = () => {};

const selectCourier = async (row: User.ResUserList) => {
  await useHandleData(
    assignTaskOrder,
    { taskId: dialogProps.value.data.taskId, courierInfo: { courierId: row.userId, courierName: row.name } },
    `选择【${row.name}】配送员`
  );
  dialogVisible.value = false;
  dialogProps.value.getTableList!();
  ElNotification({
    title: "操作成功",
    message: "成功分配配送员：" + row.name,
    type: "success",
    duration: 2500
  });
};

defineExpose({
  acceptParams
});
</script>
